<template>
  <div class="info-card flex flex-col">
    <router-link
      :to="{
        name: 'SupplyDetail',
        query: { id: props.data.id, type: 'supply' },
      }"
    >
      <div class="flex items-center justify-between mb-16px">
        <div class="fw-500 font-size-18px text-dark">
          {{ props.data.supplyTitle }}
        </div>
        <span
          class="font-size-12px text-#fff lh-16px py-3px px-10px border-rd-2px"
          :style="tagBgStyle"
          >{{ tagName }}</span
        >
      </div>
      <div class="flex items-center mb-16px font-size-14px">
        <div class="inline-flex items-center mr-20px">
          <img class="w-16px h-16px mr-3px" src="@/assets/map.svg" alt="" />
          {{ props.data?.provinceName }} {{ props.data?.cityName }}
        </div>
        <div class="inline-flex items-center">
          <img class="w-16px h-16px mr-3px" src="@/assets/time.svg" alt="" />
          <span class="text-#767676">{{
            props.data.createTime.slice(0, 16)
          }}</span>
        </div>
      </div>
      <div class="w-full h-1px bg-#D9DBE1 mb-20px"></div>
      <div class="flex flex-col font-size-14px">
        <div class="mb-16px">节点名：{{ props.data.supplyNodeName }}</div>
        <template v-if="props.data.supplyType === 1">
          <div class="mb-16px">
            供电方式：<dictName
              :value="props.data.framePowerWay"
              code="power_way"
            />
          </div>
          <div class="mb-16px">供电功率：{{ props.data.framePower }}</div>
          <div class="mb-16px">机柜高度：{{ props.data.frameHeight }}</div>
          <div class="mb-16px">可租数量：{{ props.data.supplyNum }}</div>
          <div>单价：{{ props.data.framePrice }} {{props.data.priceUnit}}</div>
        </template>
        <template v-else-if="props.data.supplyType === 2">
          <div class="mb-16px">
            运营商：<dictName :value="props.data.bwOperator" code="operator" />
          </div>
          <div class="mb-16px">
            路由类型：<dictName
              :value="props.data.bwRouteType"
              code="route_type"
            />
          </div>
          <div class="mb-16px">
            带宽单价：{{ props.data.bwBandwidthPrice }} {{props.data.priceUnit}}
          </div>
          <div class="mb-16px">
            可租带宽数量：{{ props.data.bwBandwidthNum }}
          </div>
          <div class="flex justify-between">
            <span>可租拥有数量：{{ props.data.bwIpNum }}个</span>
            <span>IP单价：{{ props.data.bwIpPrice }} {{props.data.priceUnit}}</span>
          </div>
        </template>
        <template v-else-if="props.data.supplyType === 4">
          <div class="mb-16px">
            计算资源：<dictName
              :value="props.data.gpuResource"
              code="gpu_resource_type"
            />
          </div>
          <div class="mb-16px">网络架构：{{ props.data.gpuNet }}</div>
          <div class="mb-16px">
            计费模式：{{ GPU_ABILITY_TYPE_ENUM[props.data.gpuAbilityType] }}
          </div>
          <div class="mb-16px">适用场景：{{ props.data.gpuOccasion }}</div>
          <div class="flex justify-between">
            <span>拥有数量：{{ props.data.gpuNum }}</span>
            <span>单价：{{ props.data.gpuPrice }} {{props.data.priceUnit}}</span>
          </div>
        </template>
      </div>
    </router-link>
    <div v-if="isCreator" class="card-footer flex items-center justify-between">
      <el-tag :type="REVIEW_STATUS_TAG_TYPE_ENUM[data.status]">{{
        REVIEW_STATUS_ENUM[data.status]
      }}</el-tag>
      <div>
        <el-button
          v-if="props.data.status >= 0"
          size="mini"
          @click="toggleStatus"
          >{{ props.data.status === 1 ? "下架" : "上架" }}</el-button
        >
        <el-button type="primary" size="mini" @click="goEdit">编辑</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  SOURCE_TYPE_ENUM,
  SOURCE_TYPE_TAG_COLOR_ENUM,
  GPU_ABILITY_TYPE_ENUM,
  REVIEW_STATUS_ENUM,
  REVIEW_STATUS_TAG_TYPE_ENUM,
} from "@/const";

const props = defineProps({
  data: Object,
  isCreator: Boolean,
});

const emits = defineEmits(["toggle"]);

const tagName = computed(() => SOURCE_TYPE_ENUM[props.data.supplyType]);
const tagBgStyle = computed(() => ({
  background: SOURCE_TYPE_TAG_COLOR_ENUM[props.data.supplyType],
}));

const router = useRouter();
const goEdit = () => {
  router.push({
    name: "CreateSupply",
    query: { id: props.data.id },
  });
};

const $api = inject("$api");
const toggleStatus = async () => {
  const { id, status } = props.data;
  const { code } = await $api.supply.toggleSupply({
    id,
    status: Number(!status),
  });
  if (code === 200) {
    ElMessage.success(status ? "下架成功" : "上架成功");
    emits("toggle");
  }
};
</script>
